<template>
  <div style="font-size: 14px;height: 100%">
    <el-container style="height: 100%">

      <el-aside   style="height: 100%">
        <el-menu :default-openeds="['1']" :unique-opened="true">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-caret-right"></i>第一类医疗器械</template>
            <el-menu-item-group>
              <el-menu-item index="1-1">
                <router-link to="/classify/prod1">详情</router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-caret-right"></i>第二类医疗器械</template>
            <e1-menu-item-group>
              <el-menu-item index="2-1">
                <router-link to="/classify/prod2">详情</router-link>
              </el-menu-item>
            </e1-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-caret-right"></i>第三类医疗器械</template>
            <e1-menu-item-group>
              <el-menu-item index="3-1">
                <router-link to="/classify/prod3">详情</router-link>
              </el-menu-item>
            </e1-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container style="width: 100%">
        <el-header style="text-align: right; width: 100%;font-size: 12px;background-color: #ffffff">

            <!--<i class="el-icon-setting" style="margin-right:15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>-->
<!--          <ctop :username="userName" :isLogin="isl" />-->
          <index-top :name="userName" :is-login="isl"></index-top>



          <!--<el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="item in 6" :key="item">
              <h3 class="medium">{{ item }}</h3>
            </el-carousel-item>
          </el-carousel>-->

        </el-header>


        <el-main>
          <router-view></router-view>
        </el-main>

    </el-container>

  </el-container>


  </div>

</template>


<script>
import ctop from '../components/ctop'
import {isLogin} from "../../utils/request";
import {getToken} from "../../utils/auth";
import IndexTop from "../components/indexTop";
import Search from "./search/search";

  export default {
    name: "classify",

    data(){
      return{
        show3: true,
        userName:"",
        isl:false,
      }
    },
    components:{
      Search,
      IndexTop,
      ctop,
    },
    created() {
      this.getUserName()
    },

    methods: {
      getUserName() {
        this.userName = this.$store.state.user.name;
        if (getToken()) {
          isLogin.show = true
          this.isl = isLogin.show
        } else {
          this.isl = isLogin.show
          isLogin.show = false
        }
      },
    }
}
</script>

<style scoped lang="scss">
  .el-header {
    backdrop-color: #899db9;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }

  .product:hover{
    cursor: pointer;
    transform: scale(1.05);
    border-top: 1px solid red!important;
  }

  .el-tag {
    // white-space: normal;
    height: auto;
    text-align: center;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .top-title:hover{
    cursor: pointer;
    color: #e5e5e5!important;
  }
  .title{
    font-weight: bold;
    font-size: 18px;
  }
  .title:hover{
    color: #c250c6!important;
  }

</style>
